<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.myadv{
				border: 3px groove red;
				opacity: 0.4;
			}
		</style>
		<script type="text/javascript" src="jquery-3.2.1.min.js" ></script>
		<script>
			$(function(){
				$("#btn").click(function(){
					$("#adv").toggleClass("myadv");
				});
				$("#btnHide").click(function(){
					$("#adv").hide(3000,function(){alert("图片不见了");});
				});
				$("#btnShow").click(function(){
					$("#adv").show(3000);
				});
				$("#btnout").click(function(){
					//$("#adv").fadeOut(3000);
					$("#adv").slideUp(3000);
				});
				$("#btnin").click(function(){
					//$("#adv").fadeIn(3000);
					$("#adv").slideDown(3000);
				});
				$("#btnAni").click(function(){
					$("#adv").animate({marginLeft:"200px",marginTop:"400px"},4000,"linear");
				});
			});
		</script>
	</head>
	<body>
		<img  src="../day11/images/mai.jpg" id="adv" />
		<input type="button" value="切换样式" id="btn"/>
		<input type="button" value="hide" id="btnHide" />
		<input type="button" value="show" id="btnShow" />
		<input type="button" value="fadeout" id="btnout" />
		<input type="button" value="fadein" id="btnin" />
		<input type="button" value="自定义动画" id="btnAni" />
	</body>
</html>
